Javascript의 클래스

✒️ 2025-05-23 17:00 내용 수정

Node.js 교과서 개정 3판 내용 정리 추가

클래스

Javascript에서 객체를 생성하기 위한 탬플릿

• 참고 자료 : mdn web docs JavaScript Classes
• Javascript에서 클래스는 특별한 함수로, 구조적으로 Java에서 배웠던 Class와 거의 비슷하다.
  • 클래스가 있긴 하지만 Javascript가 프로토타입 기반으로 동작하는 것을 잊으면 안된다.
  • Class 클래스, 프로토타입(Prototype) 참고.
• Class의 함수를 추가할 때는 function 키워드를 제외한다.
• Class 내의 constructor와 function에서 this 키워드를 생략하면 참조 에러가 발생한다.
  • Java로 치면 field member를 가리키는 게 아닌 다른 것을 참조하라고 지정해서 에러가 뜨는 것과 비슷하다.
• 클래스의 body는 strict mode에서 실행되기 때문에 더 엄격한 문법이 적용된다.
• 클래스는 재정의를 할 수 없다.

class ClassName{
    // constructor
    constructor(key1, key2) {
        this.key1 = key1;
        this.key2 = key2;
    }
    
    // method
    functionName(param) { // function 키워드를 제외하고, 함수 이름과 매개변수만 작성
        console.log(`key1 : ${this.key1} / key2 : ${this.key2} / param : ${param}`)
    }
}

// 객체 생성
let test = new ClassName(key1, key2);

// 객체의 함수 호출
test.functionName(param);

• 인스턴스의 속성은 반드시 클래스 내에서 정의되어야 한다.

class ClassName{
    constructor(key1, key2) {
        this.key1 = key1; // method 내에서 인스턴스의 속성 정의
        this.key2 = key2;
    }
}

클래스 선언

• class ClassName{}으로 생성한다.
• 함수는 정의하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다.
  • 즉 클래스는 호이스팅되지 않는다.
  • JavaScript#호이스팅(Hoisting), Resources/Web/JavaScript/함수/함수#함수의 호이스팅 참고.

class ClassName{
    // constructor
    constructor(key1, key2) {
        this.key1 = key1;
        this.key2 = key2;
    }
    
    // method
    functionName(param) { // function 키워드를 제외하고, 함수 이름과 매개변수만 작성
        console.log(`key1 : ${this.key1} / key2 : ${this.key2} / param : ${param}`)
    }
}

클래스 표현식

• class 키워드를 사용하는 것은 클래스 선언과 동일하지만, 이름을 가지거나 없을 수도 있다.
• 이름을 가진 class 표현식의 이름은 클래스 body의 지역 스코프에서만 유효하다.
  • 클래스의 인스턴스가 아닌 name 속성으로 찾을 수 있다.
  • JavaScript#스코프(Scope) 참고.
• 클래스 선언과 동일하게 호이스팅 적용이 제한된다.

// 이름이 없는 경우
let test = class {
	constructor(key1, key2) {
		this.key1 = key1;
		this.key2 = key2;
	}
}

console.log(test.name);

// 이름이 있는 경우
let test2 = class  Test{
	constructor(key1, key2) {
		this.key1 = key1;
		this.key2 = key2;
	}
}

생성자

• Java의 Class와 마찬가지로 객체를 생성하고 초기화하는 메소드인 생성자가 존재한다.
• constructor() {} 키워드로 생성한다.
• 부모 클래스의 생성자 호출은 super를 사용한다.

class ClassName{
    // constructor
    constructor(key1, key2) {
        this.key1 = key1;
        this.key2 = key2;
    }
}

정적 메소드

• Javascript의 class도 내부에 정적 메소드(static method)를 생성할 수 있다.
  • 제어자#2. static 제어자 참고.
• 정적 메소드를 생성하면 인스턴스를 생성하지 않고 함수를 호출할 수 있다.

class Test{
    // constructor
    constructor(key1, key2) {
        this.key1 = key1;
        this.key2 = key2;
    }

	// static method
	static info(name) {
		console.log(name);
	}
}

// Test 클래스를 인스턴스화 하지 않고 바로 info()를 호출할 수 있다.
Test.info('hi');

• 정적 메소드와 프로토타입 메소드에서 this 키워드를 사용할 때 this 값은 메소드 안에서 undefined가 된다.
  • class body가 strict mode로 실행되기 때문에 자동으로 바인딩되지 않는다.
  • non-strict mode 구문 형태로 작성하면 초기 this값은 전역 객체가 바인딩된다.

class Test {
	info() {
		return this;
	}
}

let test = new Test();
console.log(test.info()); // Test {}

let info_test = test.info; // test 객체의 메소드를 가져와서 지정
console.log(info_test()); // undefined

• 정적(static) 속성과 프로토타입 데이터 속성은 반드시 클래스 선언부 밖에서 정의되어야 한다.

class Test {
    static name = 20;
}

let test = new Test();
console.log(test.name); // undefined

test.name = 10;
console.log(test.name); // 10

필드 선언

• 아직 제한적으로 제공되는 기능으로, 브라우저에서 제공하지 않으면 사용할 수 없다.

• Java의 필드 선언처럼 클래스 내 블록에서 필드를 선언한다.

• public field 선언

class ClassName {
	field1 = 0; // 필드 선언
	field2;

	constructor(field1, field2) {
		this.field1 = field1; 
		this.field2 = field2;
	}
}

• private field 선언 : #필드명 으로 선언한다.
  • 클래스 바깥에서 접근할 수 없으며, 클래스 내부에서만 읽고 쓰는게 가능하다.
  • 상세 내용은 mdn web docs JavaScript Private class fields 참고.
  • 원래 Javascript에서는 private을 지정할 수 없어 클로저(클로저(Closure))를 사용했으며, private의 협약적 표시로 언더 스코어 "_"를 사용했었다.
    • 참고 자료 : stackoverflow Is the underscore prefix for property and method names merely a convention

class ClassName {
	#field1 = 0; // 필드 선언
	#field2;

	constructor(field1, field2) {
		this.#field1 = field1; 
		this.#field2 = field2;
	}
}

클래스 추상화

• 프로그램 내에서 사용할 용도에 맞게 적절하게 설계하는 과정이다.
• 객체 생성을 위해 이름, 설명, 정의를 추가한다.
• 객체를 사용하는 사람이 객체 내부에 존재하는 복잡한 원리를 모르더라도 외부에 공개된 property, method만 가지고 사용할 수 있도록 만들어야 한다.
• property와 method의 이름을 잘 작성해서 각각의 property와 method가 무슨 역할을 하는지 보기 쉽게 작성해야 한다.
• 추상화 과정
  • 객체의 설명을 보고 특성과 기능을 분리한다.
  • 객체의 특성은 property로 지정하며, 이름은 해당 특성을 이해하기 쉽도록 작성한다.
  • 객체의 기능에 대한 부분을 메소드로 지정하고, 이름은 해당 메소드의 기능이 무엇인지 이해하기 쉽도록 작성한다.